<template>
    <div>
        <div class="header">
            <div class="navs">
                <div class="nav" :class="{cur: serve}" @click="serve=true">使用代理</div>
                <div class="nav" :class="{cur: !serve}" @click="serve=false">静态图片</div>
            </div>
            <div class="setting" @click="onSetting"></div>
        </div>

        <template v-if="serve">
            <ParamView label="动态链接：" tip="地址中的变量使用@代替，@@@为3位数，不足3位自动补零" :mult="false" :word="httpLink" @word="onHttpLink" :err="err.httpLink"></ParamView>
            <ParamView label="起始位置：" tip="1-10" :mult="false" :word="position" @word="onPosition" :err="err.position"></ParamView>
            <ParamView label="正则匹配：" tip="src=(\S+.jpg)" :mult="false" :word="reg" @word="onReg"></ParamView>
            <ParamView label="网页地址：" tip="" :mult="true" :word="httpLinks"  @word="onHttpLinks"></ParamView>
        </template>
        <template v-else>
            <ParamView label="动态链接：" tip="地址中的变量使用@代替，@@@为3位数，不足3位自动补零" :mult="false" :word="imgLink" @word="onImgLink"></ParamView>
            <ParamView label="起始位置：" tip="1-10" :mult="false" :word="position" @word="onPosition"></ParamView>
        </template>
        <ParamView label="图片前缀：" tip="图片地址为相对路径时需设置前缀" :mult="false" :word="prefix"  @word="onPrefix"></ParamView>    
       
        <div class="btns">
            <div class="btn" @click="onNext">下一批</div>
            <div class="btn" @click="onGrab">确定</div>
        </div>
        <ImageView :prefix="prefix" :imgs="imgs"></ImageView>
        <a class="top" @click="onTop" :class="{run}"></a>

        <PopView title="设置接口" v-if="visible.setting" @close="onClose" @cancel="onCancel" @sure="onSure">
            <template v-slot:content>
                <div class="content">
                    <div class="tip">请输入接口所在的服务器地址；为空则使用当前服务器</div>
                    <input type="text" placeholder="https://www.madman.fun" class="host" v-model="host"/>
                </div>
            </template>
        </PopView>
    </div>
</template>

<script>
import ParamView from '../../components/ParamView/index.vue'
import ImageView from '../../components/ImageView/index.vue'
import PopView from '../../components/PopView/index.vue'
import tooler from '../../core/tooler'
import request from '../../core/request'
import linkMap from '../../core/linkMap'

import { ref } from 'vue'

export default {
    name: "Home",
    data(){
        return {
            httpLink: "",
            httpLinks: "",
            imgLink: "",
            position: "1-10",
            reg: "",
            prefix: "",
            imgs: [],
            timer: 0,
            serve: true,
            // run: false,
            // host: "",
            visible: {
                setting: false
            },
            err: {
                httpLink: false,
                position: false
            }
        }
    },
    components: {
        ParamView, ImageView, PopView
    },
    setup(){
        var run = ref(false);
        var host = ref(tooler.readData("host", ""));

        const onTop = ()=>{
            var num = document.documentElement.scrollTop;
            var tid = setInterval(() => {
                num += (0 - document.documentElement.scrollTop) * 0.2
                if(num < 1){
                    num = 0;
                    clearInterval(tid);
                    run.value = false;
                }
                document.documentElement.scrollTop = num;
            }, 30);
            run.value = true;
        }

        const saveHost = ()=>{
            tooler.saveData("host", host.value);
            request.changeHost(host.value);
        }
        return {run, onTop, host, saveHost}
    },
    mounted(){
        this.readData();
    },
    methods: {
        onHttpLink(value) {
            this.httpLink = value;
            this.position = '1-10';
            this.reg = linkMap.read(this.httpLink);
            this.makeHttpLinks();
            this.saveData();
        },
        onHttpLinks(value){
            this.httpLinks = value;
        },
        onImgLink(value){
            this.imgLink = value;
        },
        onPosition(value){
            this.position = value;
            this.makeHttpLinks();
            this.saveData();
        },
        onPrefix(value){
            this.prefix = value;
        },
        onReg(value){
            this.reg = value;
            this.saveData();
        },
        onSetting(){
            this.visible.setting = true;
        },
        onClose(){
            this.visible.setting = false;
        },
        onCancel(){
            this.visible.setting = false;
        },
        onSure(){
            this.visible.setting = false;
            console.log(this.host);
            this.saveHost();
        },
        onNext(){
            var nums = this.position.split(/-/);
            var start = Number(nums[0]);
            var end = Number(nums[1]);
            var total = end - start + 1;
            this.position = (start + total) + "-" + (end + total);
            if(this.serve){
                this.makeHttpLinks();
            }
            
            this.saveData();
            clearTimeout(this.timer);
            this.timer = setTimeout(()=>{
                this.onGrab();
            }, 600);
        },
        readData(){
            this.httpLink = tooler.readData("httpLink", "");
            this.imgLink = tooler.readData("imgLink", "");
            this.position = tooler.readData("position", "");
            this.reg = tooler.readData("reg", "");
        },
        saveData(){
            tooler.saveData("httpLink", this.httpLink);
            tooler.saveData("imgLink", this.imgLink);
            tooler.saveData("position", this.position);
            tooler.saveData("reg", this.reg);
        },
        makeHttpLinks(){
            console.log("000")
            if(!this.httpLink.match(/@/)){
                this.err.httpLink = true;
                return;
            }
            this.err.httpLink = false;
            if(!this.position.match(/^\d+-\d+$/)){
                this.err.position = true;
                return;
            }
            this.err.position = false;
            var nums = this.position.split(/-/);
            var list = tooler.makeLinks(this.httpLink, Number(nums[0]), Number(nums[1]));
            this.httpLinks = list.join("\n");
        },
        async onGrab(){
            this.imgs = [];
            linkMap.save(this.httpLink, this.reg);
            if(this.serve){
                var urls = this.httpLinks.split("\n");
                let form = new FormData();
                form.append("urls", urls.join(","));
                form.append("reg", this.reg);

                var res = await request.post("/resource/proxy/data", form);
                console.log(res);
                this.imgs = res.data;
            }
            else{
                var nums = this.position.split(/-/);
                this.imgs = tooler.makeLinks(this.imgLink, Number(nums[0]), Number(nums[1]));
            }
        }
    },
}
</script>

<style lang="less" scoped>
@import url(./index.less);

</style>